<template>
	<!-- 订单信息-店铺名称组件 -->
	<view class="shopNames">
		<view class="shopNames-main">
			<!-- 店铺名称 -->
			<view class="header">
				店铺名称
			</view>
			<!-- 订单 -->
			<view class="title flexjcsb">
				<view class="title-left">
					<view class="title-left-image">
						<image src="https://img2.baidu.com/it/u=373805894,1655627384&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode=""></image>
					</view>
					<view class="title-left-content">
						<view class="">
							咖喱鸡肉饭 + 饮料
						</view>
						<view class="">
							少辣 / 可乐
						</view>
					</view>
				</view>
				<view class="title-right">
					<text>x1</text>
					￥<text>12.00</text>
				</view>
			</view>
			<!-- 包装费 -->
			<view class="fee flexjcsb">
				<view class="">
					包装费
				</view>
				<view class="fee-right">
					<view class="fee-right-last">
						￥<text>1</text>
					</view>
				</view>
			</view>
			<view class="fee flexjcsb">
				<view class="">
					配送费
				</view>
				<view class="fee-right">
					<view class="fee-right-first">
						￥<text>3</text>
					</view>
					<view class="fee-right-last">
						￥<text>1</text>
					</view>
				</view>
			</view>
			<view class="fee flexjcsb">
				<view class="">
					店铺立减
				</view>
				<view class="fee-right">
					<view class="fee-right-last">
						-￥<text>5</text>
					</view>
				</view>
			</view>
			<view class="fee flexjcsb">
				<view class="">
					红包优惠券
				</view>
				<view class="fee-right">
					<view class="fee-right-last">
						-￥<text>5</text>
					</view>
				</view>
			</view>
			<!-- 合计 -->
			<view class="amountTo">
				<view class="amountTo-main">
					<view class="">
						已优惠<text>￥22</text>
					</view>
					<view class="">
						合计 <text>￥</text><text>12.9</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="less" scoped>
	.shopNames {
		width: 702rpx;
		height: 491rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(118,118,118,0.09);
		border-radius: 10rpx;
		.shopNames-main {
			padding: 0 30rpx 0 27rpx;
		}
		// 店铺名称
		.header {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #4A4A4A;
			padding: 28rpx 0 33rpx 0;
		}
		// 订单
		.title {
			.title-left {
				display: flex;
				.title-left-image {
					image {
						width: 102rpx;
						height: 102rpx;
						border-radius: 10rpx;
					}
				}
				.title-left-content {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #898989;
					padding-left: 19rpx;
					view:first-child {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
						padding-bottom: 35rpx;
					}
				}
			}
			.title-right {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #898989;
				text:first-child {
					padding-right: 43rpx;
				}
				text:last-child {
					font-size: 30rpx;
				}
			}
		}
		// 费
		.fee{
			height: 55rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #202020;
			.fee-right {
				display: flex;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 300;
				.fee-right-first {
					color: #878787;
					text-decoration: line-through;
					padding-right: 20rpx;
				}
				.fee-right-last {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #F14500;
					text {
						font-size: 30rpx;
					}
				}
			}
		}
		// 合计
		.amountTo {
			display: flex;
			justify-content: flex-end;
			padding-top: 10rpx;
			.amountTo-main {
				display: flex;
				align-items: center;
				align-items: baseline;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #9B9B9B;
				view:first-child {
					text {
						color: #F25F40;
						padding-right: 15rpx;
					}
				}
				view:last-child {
					text {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 600;
						color: #2B2B2B;
					}
					text:last-child {
						font-size: 36rpx;
					}
				}
			}
		}
	}
</style>